<template>
    <div style="margin-bottom:56px">
        <v-toolbar dark color="primary" style="box-shadow:none">
            <v-icon @click="$router.back(-1)">keyboard_arrow_left</v-icon>
            <v-toolbar-title style="margin:0">我的收藏</v-toolbar-title>
            <v-icon style="position:absolute;right:0;margin-right:16px   " large @click="filter=true">list</v-icon>
        </v-toolbar>

        <v-layout row>
            <v-flex xs12 sm6 offset-sm3>
            <v-card>
                <v-list two-line>
                <div v-for="(item, index) in items" @click="goDetail" :key="index" v-show="item.show">
                    <v-subheader>{{item.header}}</v-subheader>
                    <div v-for="(value, index) in item.content" @click="goDetail" :key="index">
                        <v-list-tile avatar ripple>
                            <v-list-tile-avatar>
                            <img src="http://ppt.downhot.com/d/file/p/2014/08/05/cb5322240543dabe9401fd166a1a6cfc.png" :key="index"
                            style="border-radius: 0%;height: 40px;width: 56px;">
                            </v-list-tile-avatar>
                        <v-list-tile-content>
                            <v-list-tile-sub-title class="text--primary">{{ value.title }}</v-list-tile-sub-title>
                            <v-list-tile-sub-title>{{ value.content }}</v-list-tile-sub-title>
                        </v-list-tile-content>
                        <v-list-tile-action>
                            <v-list-tile-action-text>{{value.price}}</v-list-tile-action-text>
                        </v-list-tile-action>
                        </v-list-tile>
                        <v-divider v-if="index + 1 < item.content.length" :key="`divider-${index}`"></v-divider>
                    </div>
                </div>
                </v-list>
            </v-card>
            </v-flex>
        </v-layout>
        <v-navigation-drawer v-model="filter" fixed temporary right value="filter"
            style="width:auto;height:auto;top:56px;padding:0px">
            <v-list>
                <v-list-tile v-for="(choice,index) in choices" :key=index @click="getChoice(index)">
                    <v-list-tile-avatar>
                        <v-icon>{{choice.icon}}</v-icon>
                    </v-list-tile-avatar>
                    <v-list-tile-title>{{choice.title}}</v-list-tile-title>
                </v-list-tile>
            </v-list>

        </v-navigation-drawer>
    </div>
</template>

<script>
export default {
    data(){
        return{
            items:[
                {
                    header:'商品',
                    content:[
                        { img: '', title: '废旧电脑',  content: "卖废旧电脑卖废旧电脑哈哈哈哈哈" ,price:'2000元'},
                        { img: '', title: '废旧电脑',  content: "卖废旧电脑卖废旧电脑哈哈哈哈哈" ,price:'2000元'},
                        { img: '', title: '废旧电脑',  content: "卖废旧电脑卖废旧电脑哈哈哈哈哈" ,price:'2000元'},
                        { img: '', title: '废旧电脑',  content: "卖废旧电脑卖废旧电脑哈哈哈哈哈" ,price:'2000元'},
                        ],
                    show:true,
                },
                {
                    header:'菜品',
                    content:[
                        { img: '', title: '番茄蛋汤',  content: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元'},
                        { img: '', title: '番茄蛋汤',  content: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元'},
                        { img: '', title: '番茄蛋汤',  content: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元'},
                        { img: '', title: '番茄蛋汤',  content: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元'},
                        ],
                    show:true,
                },
                {
                    header:'服务',
                    content:[
                        { img: '', title: '干洗',  content: "洗衣服洗衣服洗衣服洗衣服哈哈哈哈哈哈哈哈哈" ,price:'20元'},
                        { img: '', title: '干洗',  content: "洗衣服洗衣服洗衣服洗衣服哈哈哈哈哈哈哈哈哈" ,price:'20元'},
                        { img: '', title: '干洗',  content: "洗衣服洗衣服洗衣服洗衣服哈哈哈哈哈哈哈哈哈" ,price:'20元'},
                        { img: '', title: '干洗',  content: "洗衣服洗衣服洗衣服洗衣服哈哈哈哈哈哈哈哈哈" ,price:'20元'},
                    ],
                    show:true,
                }
            ],
            filter:false,
            choices:[
                {title:'商品',icon:'shop'},
                {title:'菜品',icon:'fastfood'},
                {title:'服务',icon:'cloud'},
            ],
        }
    },
    methods:{
        goDetail(){
            this.$router.push('/dishes/dish-detail')
        },
        getChoice(choice){
            for(var i in this.items){
                this.items[i].show=false
            }
            this.items[choice].show=true
            this.filter=false
        }
    }
}
</script>

<style scoped>
.flex.xs4{
    text-align: center
}

.search{
    height:50px;
    background:white;
    border-radius: 25px;
    margin:0 16px 16px 16px;
    padding: 0 10px 0 10px;
}

input:focus{
    outline: none
}
</style>
